<template>
  <!-- 完成的部分 -->
  <div class="question-done-area" v-if="!editing" @mouseenter="onMouseOver" @mouseleave="onMouseOut">
    <div class="title-area">
      <span>{{ number + "." + question.title }}</span>
      <span v-if="question.must" style="color: red">*</span>
    </div>
    <div class="remark">
      <span> {{ question.remark }} </span>
    </div>
    <div>
      <span>{{ question.detail.degree_min }}&nbsp;&nbsp;</span>
      <el-radio-group v-model="answer">
        <el-radio
          v-for="(choice, i) in choiceList"
          :key="i"
          :label="choice"
        ></el-radio>
      </el-radio-group>
      <span>&nbsp;&nbsp;{{ question.detail.degree_max }}</span>
    </div>
    <transition name="bounce">
        <div
          class="operation-buttons"
          v-show="seen"
        >
          <div @click="editQuestion">
            <i class="el-icon-edit"></i>
            <span style="cursor: pointer">编辑</span>
          </div>
          <div @click="deleteQuestion">
            <i class="el-icon-delete"></i>
            <span style="cursor: pointer">删除</span>
          </div>
          <div @click="duplicateQuestion">
            <i class="el-icon-document-copy"></i>
            <span style="cursor: pointer">复制</span>
          </div>
        </div>
      </transition>
  </div>
  <!-- 点击编辑按钮后的编辑部分 -->
  <div v-else>
    <el-card class="single">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="题目" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <span>评分类型</span>
          <el-select
            v-model="form.grade_type"
            placeholder="请选择"
            @change="changeForm"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-checkbox v-model="form.must" style="margin-left: 20px"
            >必填</el-checkbox
          >
        </el-form-item>
        <!-- <el-form-item>
          <span>评分范围</span>
          <el-input-number
            v-model="form.range"
            :min="2"
            :max="999"
            size="mini"
          ></el-input-number>
          <span>起始数值</span>
          <el-input-number
            v-model="form.start"
            :min="1"
            :max="999"
            size="mini"
          ></el-input-number>
        </el-form-item> -->
        <el-form-item v-if="form.grade_type == 4">
          <span>程度</span>
          <el-input
            v-model="form.degree_min"
            placeholder="请输入内容"
            class="degree"
          ></el-input>
          <span>-</span>
          <el-input
            v-model="form.degree_max"
            placeholder="请输入内容"
            class="degree"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">确定</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    props: {
      question: Object,
      number: Number,
      getQuestionnaire: Function,
      questionnaire_id: Number,
      addQuestion: Function,
    },
    data() {
      return {
        answer: null,
        choiceList: [],
        editing: false,
        form: null,
        options: [
          {
            value: 1,
            label: "满意度",
          },
          {
            value: 2,
            label: "认同度",
          },
          {
            value: 3,
            label: "重要度",
          },
          {
            value: 4,
            label: "自定义",
          },
        ],
        changeList: [
          {
            value: 1,
            left: "非常不满意",
            right: "非常满意",
          },
          {
            value: 2,
            left: "非常不认同",
            right: "非常认同",
          },
          {
            value: 3,
            left: "非常重要",
            right: "非常不重要",
          },
        ],
        rules: {
          title: [{ required: true, message: "请输入题目名称", trigger: "blur" }],
        },
        timer: null,
        seen: false,
      };
    },
    created() {
      for (var i = 0; i < this.question.detail.range; i++) {
        this.choiceList.push(i + this.question.detail.start);
      }
      // this.$nextTick(function () {
      //   for (var i = 0; i < this.question.detail.range; i++) {
      //     this.choiceList.push(i + this.question.detail.start);
      //   }
      // });
    },
    methods: {
      onMouseOver() {
        this.seen = true;
      },
      onMouseOut() {
        this.seen = false;
      },
      duplicateQuestion() {
        var formData = JSON.parse(JSON.stringify(this.question));
        formData["id"] = null;
        this.addQuestion(formData);
      },
      async deleteQuestion() {
        const form = {
          questionnaire_id: this.questionnaire_id,
          username: localStorage.getItem("username"),
        };
        var breakfunc = false
        await axios.post("isallowed/", form).then((response) => {
          // console.log('yessss')
          if (response.data.code == -3) {
            // 发布中不许改
            this.$notify.error({
              title: "错误",
              message: "问卷正处于发布状态，无法编辑",
            });
            this.getQuestionnaire();
            console.log('我摊牌了')
            breakfunc = true
          } else if (response.data.code == -4) {
            // 该问卷已被浏览过 请在副本中编辑
            this.$notify({
              title: "警告",
              message: "该问卷已被浏览，无法编辑，请在已自动复制的副本中进行编辑",
              type: "warning",
            });
            this.getQuestionnaire();
            breakfunc = true
          }
        });
        if(breakfunc) {return}
        const formData = {
          question_id: this.question.id,
        };
        axios.post("delete_question/", formData);
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.getQuestionnaire();
        }, 200);
      },
      changeForm(value) {
        if (value == 4) {
          this.form.degree_min = "";
          this.form.degree_max = "";
        }
        for (var i = 0; i < this.changeList.length; i++) {
          if (this.changeList[i].value == value) {
            this.form.degree_min = this.changeList[i].left;
            this.form.degree_max = this.changeList[i].right;
          }
        }
      },
      async editQuestion() {
        const form = {
          questionnaire_id: this.questionnaire_id,
          username: localStorage.getItem("username"),
        };
        var breakfunc = false
        await axios.post("isallowed/", form).then((response) => {
          // console.log('yessss')
          if (response.data.code == -3) {
            // 发布中不许改
            this.$notify.error({
              title: "错误",
              message: "问卷正处于发布状态，无法编辑",
            });
            this.getQuestionnaire();
            console.log('我摊牌了')
            breakfunc = true
          } else if (response.data.code == -4) {
            // 该问卷已被浏览过 请在副本中编辑
            this.$notify({
              title: "警告",
              message: "该问卷已被浏览，无法编辑，请在已自动复制的副本中进行编辑",
              type: "warning",
            });
            this.getQuestionnaire();
            breakfunc = true
          }
        });
        if(breakfunc) {return}
        this.form = JSON.parse(JSON.stringify(this.question));
        // 一些无聊的赋值操作
        // 实在是不优雅qwq
        this.form["questionnaire_id"] = this.questionnaire_id;
        this.form["question_id"] = this.question.id;
        this.form["username"] = localStorage.getItem("username");
        this.form["grade_type"] = this.question.detail.grade_type;
        this.form["degree_min"] = this.question.detail.degree_min;
        this.form["degree_max"] = this.question.detail.degree_max;
        this.form["range"] = this.question.detail.range;
        this.form["start"] = this.question.detail.start;
        // 终于结束了
        this.editing = true;
      },
      cancel() {
        this.editing = false;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //   执行提交
            axios.post("questions/", this.form).then((response) => {
              console.log(response.status);
              console.log(response.data);
            });
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
              this.getQuestionnaire();
              this.editing = false;
              // location.reload();
            }, 200);
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
    },
  };
</script>

<style scoped>
.title-area {
  margin: 5px;
  font-size: 14px;
}

.operation-buttons {
  width: 40%;
  margin: 0 auto;
  font-size: 15px;
  display: flex;
  justify-content: space-evenly;
  border: 1px solid;
  border-radius: 20px;
  margin-top: 20px;
}

.el-icon-edit,
.el-icon-delete,
.el-icon-document-copy {
  cursor: pointer;
}
.remark {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 10px;
}
.bounce-enter-active {
  animation: bounce-in 0.3s;
}
.bounce-leave-active {
  animation: bounce-in 0.2s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
</style>